<template>
  <div class="app-container">
    <el-dialog :titleExam="title" :visible.sync="show" width="1000px" append-to-body>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="考试计划" prop="examPlanId">
          <el-input v-model="queryParams.examPlanId" placeholder="请输入考试计划" clearable
                    @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <el-form-item label="考试计划开始时间" prop="examStartTime">
          <el-date-picker clearable v-model="queryParams.examStartTime" type="date" value-format="yyyy-MM-dd"
                          placeholder="请选择考试计划开始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="考试计划结束时间" prop="examEndTime">
          <el-date-picker clearable v-model="queryParams.examEndTime" type="date" value-format="yyyy-MM-dd"
                          placeholder="请选择考试计划结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="考试地点" prop="examPlace">
          <el-input v-model="queryParams.examPlace" placeholder="请输入考试地点" clearable @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <el-form-item label="是否删除：0-否 1-是" prop="isDel">
          <el-input v-model="queryParams.isDel" placeholder="请输入是否删除：0-否 1-是" clearable
                    @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <el-form-item label="删除者" prop="delBy">
          <el-input v-model="queryParams.delBy" placeholder="请输入删除者" clearable @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <el-form-item label="删除" prop="delTime">
          <el-date-picker clearable v-model="queryParams.delTime" type="date" value-format="yyyy-MM-dd"
                          placeholder="请选择删除">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                     >新增
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
                     >修改
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
                     >删除
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                     >导出
          </el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table border v-loading="loading" :data="ExamPlanVenueList" @selection-change="handleSelectionChange">
        <el-table-column resizable show-overflow-tooltip type="selection" width="55" align="center"/>
        <el-table-column resizable show-overflow-tooltip label="主键" align="center" prop="id"/>
        <el-table-column resizable show-overflow-tooltip label="考试计划" align="center" prop="examPlanId"/>
        <el-table-column resizable show-overflow-tooltip label="考试计划开始时间" align="center" prop="examStartTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.examStartTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column resizable show-overflow-tooltip label="考试计划结束时间" align="center" prop="examEndTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.examEndTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column resizable show-overflow-tooltip label="考试地点" align="center" prop="examPlace"/>
        <el-table-column resizable show-overflow-tooltip label="是否删除：0-否 1-是" align="center" prop="isDel"/>
        <el-table-column resizable show-overflow-tooltip label="删除者" align="center" prop="delBy"/>
        <el-table-column resizable show-overflow-tooltip label="删除" align="center" prop="delTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.delTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column resizable show-overflow-tooltip label="备注" align="center" prop="remark"/>
        <el-table-column resizable label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                       >修改
            </el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                       >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                  @pagination="getList"/>
    </el-dialog>


    <!-- 添加或修改考试计划场次对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
      <el-row>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-col :span="12">
            <el-form-item label="开始时间" prop="examStartTime">
              <el-date-picker clearable v-model="form.examStartTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                              placeholder="请选择考试计划开始时间" style="width: 320px" clearale>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" prop="examEndTime">
              <el-date-picker clearable v-model="form.examEndTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                              placeholder="请选择考试计划结束时间" style="width: 320px" clearale>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="考试地点" prop="examPlace">
              <el-input v-model="form.examPlace" placeholder="请输入考试地点" style="width: 320px" clearale/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" :autosize="{ minRows: 2, maxRows: 12}" placeholder="请输入内容" style="width: 320px" clearale/>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-divider content-position="center">考试场次人员信息</el-divider>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddExamPlanVenueUser">添加</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteExamPlanVenueUser">删除
          </el-button>
        </el-col>
      </el-row>
      <el-table border :data="examPlanVenueUserList" :row-class-name="rowExamPlanVenueUserIndex"
                @selection-change="handleExamPlanVenueUserSelectionChange" ref="examPlanVenueUser">
        <el-table-column resizable show-overflow-tooltip type="selection" width="50" align="center"/>
        <el-table-column resizable show-overflow-tooltip label="序号" align="center" prop="index" width="50"/>
        <el-table-column resizable show-overflow-tooltip label="考试人员" align="center" width="250">
          <template v-slot="{row}">
            <el-select v-model="row.userId" filterable placeholder="选择人员" style="width: 240px">
              <el-option v-for="item in userList" :key="item.userId" :label="item.userName" :value="item.userId"/>
            </el-select>
          </template>
        </el-table-column>
      </el-table>


      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script src="./index.js">

</script>
